<template>
  <div class="view-main stat-main">
<el-row id="border">
        <el-col :span="12">
          <el-row>
            <div class="total">
              <el-row>
                <el-col class="select">全部</el-col>
                <el-col class="select">今日</el-col>
                <el-col class="select">本周</el-col>
                <el-col class="select">本月</el-col>
                <el-col class="select last"></el-col>
              </el-row>
              <el-row>

                <el-col class="show show1">
                  <div class="cycle">
                    <i class="el-icon-s-cooperation"></i>
                  </div>
                  <div class="total_num">{{this.ajTotalNum}}</div>
                  <div class="total_name">案件总数</div>
                </el-col>
                <el-col class="show show2">
                  <div class="cycle">
                    <i class="el-icon-s-order"></i>
                  </div>
                  <div class="total_num">{{this.jzTotalNum}}</div>
                  <div class="total_name">卷宗总数</div>
                </el-col>
                <el-col class="show show3">
                  <div class="cycle">
                    <i class="el-icon-s-release"></i>
                  </div>
                  <div class="total_num">{{this.ajTotalNum-this.jzTotalNum}}</div>
                  <div class="total_name">未制作总数</div>
                </el-col>
              </el-row>
            </div>
          </el-row>

          <el-row class="ajStat">
            <el-row class="header">
              <i class="el-icon-s-custom"></i>
              各部门案件统计
            </el-row>
            <el-row>
              <div  class='stat'>
                <el-scrollbar style="height: 93%;"> <!-- 滚动条 -->
                  <el-col :span="12">
                    <div class="areaBox first">
                      <div class="areaName">徐汇区案件总数</div>
                      <!--<div class="areaNum">23</div>-->
                      <div class="areaNum">{{this.areaNum[0]}}</div>
                      <el-divider direction="vertical" content-position="center" class="divider"/>
                      <!-- 定义图表外层容器 -->
                      <div id="mainStat1" class="statChart"></div>
                      <div class="ready">已创建</div>
                      <div class="unReady">未制作</div>
                      <div class="readyNum">{{this.readyNum[0]}}</div>
                      <div class="unReadyNum">{{this.areaNum[0]-this.readyNum[0]}}</div>
                    </div>
                    <div class="areaBox">
                      <div class="areaName">杨浦区案件总数</div>
                      <div class="areaNum">{{this.areaNum[2]}}</div>
                      <el-divider direction="vertical" content-position="center" class="divider"/>
                      <div id="mainStat3" class="statChart"></div>
                      <div class="ready">已创建</div>
                      <div class="unReady">未制作</div>
                      <div class="readyNum">{{this.readyNum[2]}}</div>
                      <div class="unReadyNum">{{this.areaNum[2]-this.readyNum[2]}}</div>
                    </div>
                    <div class="areaBox">
                      <div class="areaName">崇明区案件总数</div>
                      <div class="areaNum">{{this.areaNum[4]}}</div>
                      <el-divider direction="vertical" content-position="center" class="divider"/>
                      <div id="mainStat5" class="statChart"></div>
                      <div class="ready">已创建</div>
                      <div class="unReady">未制作</div>
                      <div class="readyNum">{{this.readyNum[4]}}</div>
                      <div class="unReadyNum">{{this.areaNum[4]-this.readyNum[4]}}</div>
                    </div>
                    <div class="areaBox">
                      <div class="areaName">崇明区案件总数</div>
                      <div class="areaNum">47</div>
                      <el-divider direction="vertical" content-position="center" class="divider"/>
                      <div id="mainStat7" class="statChart"></div>
                      <div class="ready">已创建</div>
                      <div class="unReady">未制作</div>
                      <div class="readyNum">10</div>
                      <div class="unReadyNum">13</div>
                    </div>
                  </el-col>
                  <el-col  :span="12">
                    <div class="areaBox first">
                      <div class="areaName">闵行区案件总数</div>
                      <div class="areaNum">{{this.areaNum[1]}}</div>
                      <el-divider direction="vertical" content-position="center" class="divider"/>
                      <div id="mainStat2" class="statChart"></div>
                      <div class="ready">已创建</div>
                      <div class="unReady">未制作</div>
                      <div class="readyNum">{{this.readyNum[1]}}</div>
                      <div class="unReadyNum">{{this.areaNum[1]-this.readyNum[1]}}</div>
                    </div>
                    <div class="areaBox">
                      <div class="areaName">青浦区案件总数</div>
                      <div class="areaNum">{{this.areaNum[3]}}</div>
                      <el-divider direction="vertical" content-position="center" class="divider"/>
                      <div id="mainStat4" class="statChart"></div>
                      <div class="ready">已创建</div>
                      <div class="unReady">未制作</div>
                      <div class="readyNum">{{this.readyNum[3]}}</div>
                      <div class="unReadyNum">{{this.areaNum[3]-this.readyNum[3]}}</div>
                    </div>
                    <div class="areaBox">
                      <div class="areaName">金山区案件总数</div>
                      <div class="areaNum">{{this.areaNum[5]}}</div>
                      <el-divider direction="vertical" content-position="center" class="divider"/>
                      <div id="mainStat6" class="statChart"></div>
                      <div class="ready">已创建</div>
                      <div class="unReady">未制作</div>
                      <div class="readyNum">{{this.readyNum[5]}}</div>
                      <div class="unReadyNum">{{this.areaNum[5]-this.readyNum[5]}}</div>
                    </div>
                    <div class="areaBox">
                      <div class="areaName">金山区案件总数</div>
                      <div class="areaNum">12</div>
                      <el-divider direction="vertical" content-position="center" class="divider"/>
                      <div id="mainStat8" class="statChart"></div>
                      <div class="ready">已创建</div>
                      <div class="unReady">未制作</div>
                      <div class="readyNum">10</div>
                      <div class="unReadyNum">13</div>
                    </div>
                  </el-col>
                </el-scrollbar>
              </div>
            </el-row>
          </el-row>
        </el-col>

      <el-col :span="12">
        <el-row>
          <div class="remind">
            <el-row class="header">
              <i class="el-icon-warning"></i>
              到期提醒
            </el-row>
              <el-table
                    :data="reminds" :show-header="false" height="150" border class="table" >
              <el-table-column prop="remind" label="" width=600px ></el-table-column>
              <el-table-column label="操作" align="center" width="100">
                <template slot-scope="scope">
                  <el-button type="text" size="mini" @click="handleDetail()">详情</el-button>
                </template>
              </el-table-column>
              <!--<el-table-column-->
                      <!--prop="name"-->
                      <!--label="姓名"-->
                      <!--width="180">-->
              <!--</el-table-column>-->
              <!--<el-table-column-->
                      <!--prop="address"-->
                      <!--label="地址">-->
              <!--</el-table-column>-->
            </el-table>
        </div>
        </el-row>

        <el-row>
       <div class="jzStst">
         <el-row class="header">
           <i class="el-icon-s-data"></i>
           卷宗类型统计
         </el-row>
         <el-row>
           <!-- 定义图表外层容器 -->
           <div id="main" class='chart'></div>
         </el-row>
       </div>
        </el-row>
      </el-col>
</el-row>
  </div>

</template>

<script>
import * as echarts from 'echarts'

export default {
    name: 'stat',
    props: {
        // className: {
        //     type: String,
        //     default: 'chart'
        // },
        id: {
            type: String,
            default: 'chart',
        }
    },
    data() {
        return {
            //案件统计横向柱状图，后台数据赋值
            dataSet:[[80],[90],[70],[60],[50],[40],[30],[20]],
            data2Set:[[50],[60],[70],[80],[90],[50],[70],[80]],
            style:{
                backgroundImage: "url(" + require("../assets/backgroundImage/num.jpg") + ")",
                // backgroundColor:'white',
                width: '150px',
                height: '80px',
                lineHeight: '80px',
            },
            tableData: [{
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-08',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-07',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }],
            // reminds:[
            //     {date:'沪0001 案卷已到期，请及时归还，案卷已到期，请及时归还 2021/6/14'},
            //     {date:'沪0002 案卷已到期，请及时归还，案卷已到期，请及时归还 2021/6/14'},
            //     {date:'沪0003 案卷已到期，请及时归还，案卷已到期，请及时归还 2021/6/14'},
            //     {date:'沪0004 案卷已到期，请及时归还，案卷已到期，请及时归还 2021/6/14'},
            // ],
            reminds:[ ],
            chart: null,
            ajTotalNum:'',
            jzTotalNum:'',
            unFinished:'',
            department:'徐汇区',
            areaNum:[],
            readyNum:[],
            ajNum:[],
            url: {
                getAjTotalNum: '/show/ajTotal',
                getJzTotalNum: '/show/jzTotal',
                getAjStat: '/show/ajStat',
                ajReadyCreate: '/show//readyCreate',
                ajNum: '/aj/record/eachType',
                ajRemind: '/aj/jz-manage/remind',
                // insert:'/aj/jz-manage/insert',
                // update:'/aj/jz-manage//update/{0}',
                // delete:'/aj/jz-manage//delete/{0}',
                // pageLog: '/sys/log',
                // export: '/sys/log/export'
            }
        }
    },
    created(){
        this.getTotal()
        // this.getAreaTotal()
    },
    mounted() {

        setTimeout(async () => {

        var myeChart=echarts.init(document.getElementById("main"))
        // 指定图表的配置项和数据

        var dataAxis = ['刑侦案卷', '治安案卷', '行政案卷', '工作卷', '侦察卷'];
        // var data = [20, 82, 91, 34, 90];
        var data = this.ajNum;
        var yMax = 500;
        var dataShadow = [];

        for (var i = 0; i < data.length; i++) {
            dataShadow.push(yMax);
        }
        var option = {
            title: {
                // text: '',
                // subtext: 'Fesature Sample: Gradient Color, Shadow, Click Zoom'
            },
            tooltip: {},

            xAxis: {
                data: dataAxis,
            },
            yAxis: {
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#999'
                    }
                }
            },
            dataZoom: [
                {
                    type: 'inside'
                }
            ],
            series: [
                {
                    type: 'bar',
                    showBackground: false,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#1ACDFF'},
                                {offset: 0.5, color: '#4DA7FF'},
                                {offset: 1, color: '#897AFF'}
                            ]
                        )
                    },
                    emphasis: {
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#2378f7'},
                                    {offset: 0.7, color: '#2378f7'},
                                    {offset: 1, color: '#83bff6'}
                                ]
                            )
                        }
                    },
                    label: {
                        show: true,
                        position: 'top'
                    },
                    data: data
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myeChart.setOption(option);

    //    ----------------------

        for (var q = 1; q <= 8; q++){
            var myChartStat=echarts.init(document.getElementById("mainStat"+ q))

            var max;
            // console.log("mainStat1111")

            var dataAxisStat = ['刑事案件'];
            // var dataStat = [1];
            // var data2Stat = [0];

            var dataStat = [this.readyNum[q-1]];
            var data2Stat = [this.areaNum[q-1]-this.readyNum[q-1]];
            // console.log(dataStat)

            var yMaxStat = 500;
            var dataShadowStat = [];

            for (var i = 0; i < dataStat.length; i++) {
                dataShadowStat.push(yMaxStat);
            }
            var optionStat = {
                width: '150px',
                height: '100px',

                legend: {
                    data: ['a', 'b'],
                    textStyle: {
                        color: '#ccc'
                    }
                },
                xAxis: {
                    data: dataAxisStat,
                    axisLine: {
                        lineStyle: {
                            color: 'transparent'
                        }
                    }
                },
                yAxis: {
                    splitLine: {show: false},
                    axisLine: {
                        lineStyle: {
                            color: 'transparent'
                        }
                    },
                    axisTick: {
                        show: false
                    },

                },
                series: [{
                    name: 'line',
                    type: 'bar',
                    // barGap: '-100%',
                    barWidth: 20,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: 'yellow'},
                                {offset: 0.2, color: 'orange'},
                                {offset: 1, color: 'red'}
                            ]
                        )
                        // color: 'red'
                    },
                    z: -12,
                    data: dataStat
                }, {
                    name: 'li',
                    type: 'bar',
                    // barGap: '-100%',
                    barWidth: 20,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#7DF39B'},
                                {offset: 0.2, color: '#59BED1'},
                                {offset: 1, color: '#3C93FF'}
                            ]
                        )
                        // color: 'green'
                    },
                    z: -12,
                    data: data2Stat
                },
                    {
                        name: 'dotted',
                        type: 'pictorialBar',
                        symbol: 'rect',
                        itemStyle: {
                            color: '#14277A'
                        },
                        symbolRepeat: true,
                        symbolSize: [45, 4],
                        symbolMargin: 1,
                        z: -6,
                        data: max = (dataStat > data2Stat ? dataStat : data2Stat)
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChartStat.setOption(optionStat);
        }

        }, 1000);


    },
    methods: {
        handleDetail(){
            this.$router.replace('/jzRecord')
        },
        getTotal(){
            this.$http.get(this.url.getAjTotalNum).then(data => {
                this.ajTotalNum = data.result;
            })
            this.$http.get(this.url.getJzTotalNum).then(data => {
                this.jzTotalNum = data.result;
            })
            this.$http.get(this.url.getAjStat).then(data => {
                // console.log(data.result)
                this.areaNum = data.result;
            })
            this.$http.get(this.url.ajReadyCreate).then(data => {
                // console.log(data.result)
                this.readyNum = data.result;
            })
            this.$http.get(this.url.ajNum).then(data => {
                // console.log(data.result)
                this.ajNum = data.result;
            })
            this.$http.get(this.url.ajRemind).then(data => {
                this.reminds = data.result
            })
        }
    }
}
</script>
<style scoped>
  @font-face {
    font-family: 'ds-digitalbold';
    src: url('../assets/font/ds-digib-webfont.woff2') format('woff2'),
    url('../assets/font/ds-digi-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: 'ds-digitalitalic';
    src: url('../assets/font/ds-digii-webfont.woff2') format('woff2'),
    url('../assets/font/ds-digii-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }

  .led {
    font-family: ds-digitalitalic;
    /*background-image: url("../assets/backgroundImage/numBackground.jpg");*/
  }

  .stat-main {
    background: #0A1658;
  }

  #border {
  }
  /*左上角外围框*/
  .total {
    width: 720px;
    height: 150px;
    border: 1px solid #3D6FF3;
    box-shadow: 0 0px 5px #3D6FF3;
    background-color: #14277A;
    margin-top: 20px;
    margin-left: 25px;
  }

  .select {
    width: 78px; height: 33px;
    border: 1px solid #3D6FF3;
    margin-top: -1px;
    margin-left: -1px;
    font-size: 16px;
    font-family: '宋体';
    text-align: center;
    line-height: 33px;
    color: white;
    font-weight: bold;
  }

  .total .last {
    width: 413px;
    border-left: none;
    margin-right: -1px;
    margin-left:0px;
  }
  .show .cycle {
    width: 43px;
    height: 43px;
    background-color:#2C8AC7;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    opacity: 0.9;
    /*float: left;*/
    clear: both;
    position: absolute;
    top: 23px;
    left: 25px;
    text-align: center;
    vertical-align: center;
  }
  .show{
    width: 190px; height: 85px;
    margin: 14px 24px 14px 24px;
    position: relative;
    border-radius: 5px;
  }
  i {
    color: white;
    font-size: 32px;
    position: relative;
    top: 3px;
  }
  .show1 {
    background-image: url("../assets/backgroundImage/select1.jpg");
  }
  .show2 {
    background-image: url("../assets/backgroundImage/select2.jpg");
     }
  .show3 {
    background-image: url("../assets/backgroundImage/select1.jpg");
  }
  .total_num {
    font-family: ds-digitalitalic;
    color: white;
    font-size: 40px;
    position: relative;
    top: 14px;
    left: 90px;
  }
  .total_name {
    font-size: 10px;
    color: white;
    position: relative;
    top: 14px;
    left: 95px;
    font-weight: bold;
  }

  /* 左下角外围框 */
  .ajStat {
    width: 722px;
    height: 408px;
    border: 1px solid #3D6FF3;
    box-shadow: 0 0px 5px #3D6FF3;
    /*background-color: #14277A;*/
    background-color: #0A1658;
    margin-top: 20px;
    margin-left: 25px;
  }

  .ajStat i {
    margin-left: 25px;
    margin-top: 10px;
    margin-right: 5px;
    color: white;
    font-size: 20px;
    position: relative;
    top: 3px;
  }
  .ajStat .header {
    font-size: 13px;
    color: white;
    /*font-weight: bold;*/
  }

    .ajStat .stat {
      height: 375px;
      margin-top: 20px;
      margin-left: 2%;
      width: 96%;
  }

  .areaBox {
    width: 96%;
    height: 90px;
    margin-left: 0%;
    margin-top: 8px;
    background-color: #14277A;
    font-size: 10px;
    color: white;
    position: relative;
  }
  .first {
    margin-top: 0px;
  }

  .areaName {
    font-size: 13px;
    width: 150px;
    position: absolute;
    top: 10px;
    left:20px
  }

  .areaNum {
    font-family: ds-digitalitalic;
    font-size: 48px;
    position: absolute;
    top: 34px;
    left: 40px;
  }
  .divider{
    height:70px;
    position: absolute;
    top:8px;
    left: 125px;
  }
  /*chart图*/
  .statChart {
    width: 150px;
    height:150px;
    background-color: transparent;
    transform:rotate(90deg);
    float: left;
    position: absolute;
    left: 200px;
    bottom: -20px;
    /*top: 50px;*/
  }
  .ready {
    font-size: 13px;
    position: absolute;
    top: 28px;
    left: 152px;
  }
  .unReady {
    font-size: 13px;
    position: absolute;
    top: 53px;
    left: 152px;
  }
  .readyNum{
    font-family: ds-digitalitalic;
    color: #ECE052;
    font-size: 24px;
    position: absolute;
    top: 26px;
    right: 15px;
  }
  .unReadyNum{
    font-family: ds-digitalitalic;
    color: #66FB88;
    font-size: 24px;
    position: absolute;
    top: 50px;
    right: 15px;
  }


  el-scrollbar {
    position: absolute;
    top: 10px;
  }


  /* 右上角 */
  .remind {
    width: 740px;
    height: 210px;
    border: 1px solid #3D6FF3;
    box-shadow: 0 0px 5px #3D6FF3;
    background-color: #14277A;
    margin-top: 20px;
    /*margin-right: 28px;*/
  }

  .remind i {
    margin-left: 25px;
    margin-top: 10px;
    margin-right: 5px;
    color: white;
    font-size: 20px;
    position: relative;
    top: 3px;
  }

  .remind .header {
    font-size: 13px;
    color: white;
    /*font-weight: bold;*/
  }

  .remind .table {
    height:90%;
    width: 96%;
    float: left;
    margin-left: 2%;
    margin-top: 2%;
    /*bgcolor:#14277A*/
    background-color: #14277A;
    /*border-color: transparent;*/
    color: white;
  }


  .remind /deep/ .el-table tr {
    background-color: #14277A;
  }
  .remind /deep/ .el-table th {
    background-color: #14277A;
  }

  /* 右下角 */
  .jzStst{
    width: 740px;
    height: 345px;
    border: 1px solid #3D6FF3;
    box-shadow: 0 0px 5px #3D6FF3;
    background-color: #14277A;
    margin-top: 20px;
    /*margin-right: 28px;*/
  }

  .jzStst i {
    margin-left: 25px;
    margin-top: 10px;
    margin-right: 5px;
    color: white;
    font-size: 20px;
    position: relative;
    top: 3px;
  }

  .jzStst .header {
    font-size: 13px;
    color: white;
    /*font-weight: bold;*/
  }

  .jzStst .chart {
    width: 750px;
    height: 350px;
    margin-left: 10px;
    margin-top: -15px;
  }

</style>
